<template>
  <div class="mongoliaLayer" >
     <mt-popup
      v-model="popupVisible"
      position="right"
      class="mintPop ">
      <div class="contentList">
        <top-btn @cancel="popupCansel" @confirm="confirmSelect"></top-btn>
         <div class="address">
            <div class="selAddress">
              <span>配送地址</span>
              <div class="detailAdd">
                <p @click="selcetAddress">
                  <span v-text="getAddress()"></span>
                </p>
              </div>
            </div>
            <div class="checkHave">
              <mt-button class="btn" ><img>仅看有货</mt-button>
            </div>
         </div>
         <div class="price">
           <span>价格区间</span>
           <div class="priceInput">
             <input type="number" 
             placeholder="最低价" 
             v-model="queryMIn" 
             >
             <span>-</span>
             <input type="number" 
             placeholder="最高价" 
             v-model="queryMax" 
             > 
           </div>
         </div>
         <div class="brands" v-show="brandsList.length>1">
           <p>
             <span>品牌</span>
             <span v-html="brandData"></span>
           </p>
           <ul>
             <li v-for="(item,index) in judgeBrandLength(brandsList)" 
                 :key="item.brandId"
                 :class="{check:item.checked}" 
                  @click="setBrandChecked(item,index)"
                 ><img>{{item.brandName}}</li>
             <li @click="brandMore" v-show="catesList.length>=5">更多</li>
           </ul>
         </div>
         <div class="category" v-show="catesList.length>1">
           <p>
             <span>全部分类</span>
             <span v-html="cateData"></span>
           </p>
           <ul>
             <li v-for="(item,index) in judgeCateLength(catesList)" 
                 :key="item.cateId" 
                 :class="{check:item.checked}" 
                 @click="setCateChecked(item)"
                 ><img>{{item.cateName}}</li>
             <li @click="cateMore" v-show="catesList.length>=5"><img>更多</li>
           </ul>
         </div>
        <clear-btn @cancel="clearSelect"></clear-btn>
      </div>
     </mt-popup>
      <cate-selection ref="cate"></cate-selection>
      <brand-selection ref="brand"></brand-selection>
      <slec-address ref="address"></slec-address>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import ClearBtn from "@/base/clearBtn/clearBtn";
import TopBtn from "@/base/topBtn/topBtn";
import CateSelection from "@/components/cateSelection/cateSelection";
import BrandSelection from "@/components/brandSelection/brandSelection";
import SlecAddress from "@/components/slecAddress/slecAddress";
export default {
  // @change="getMaxQuery(queryMax)"
  data() {
    return {
      popupVisible: false,
      brandSelect: [],
      cateSelect: [],
      cateData: "",
      brandData: "",
      queryMIn: "",
      queryMax: "",
      addressDetail: {}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.judgeBrandLength();
      this.judgeCateLength();
    });
  },
  computed: {
    ...mapGetters(["catesList", "brandsList"])
  },
  created() {
    if(localStorage.getItem("address")){
        this.addressDetail= JSON.parse(localStorage.getItem("address"));
      }
    this.$root.Bus.$on("clearAllBrand", () => {
      this.clearBrand();
    });
    this.$root.Bus.$on("clearAllCate", () => {
      this.clearCate();
    });
    this.$root.Bus.$on("addressName", (address) => {
     this.addressDetail=address
    });
    this.$root.Bus.$on("addressed", (addressDetail) => {
      this.addressDetail = addressDetail;
    });
  },
  methods: {
    getAddress() {
      if(this.addressDetail.addressName){
        return this.addressDetail.addressName
      }else{
        return "请选择收获地址"
      }
    },
    setCateChecked(item) {
      if (!item.checked) {
        this.$set(item, "checked", true);
      } else {
        this.$set(item, "checked", false);
      }
      if (item.checked) {
        this.cateSelect.push(item.cateName);
      } else {
        let cateIndex = this.cateSelect.indexOf(item.cateName);
        this.cateSelect.splice(cateIndex, 1);
      }
      this.cateData = this.cateSelect.toString();
    },
    setBrandChecked(item, index) {
      if (!item.checked) {
        this.$set(item, "checked", true);
      } else {
        this.$set(item, "checked", false);
      }
      if (item.checked) {
        this.brandSelect.push(item.brandName);
      } else {
        let brandIndex = this.brandSelect.indexOf(item.brandName);
        this.brandSelect.splice(brandIndex, 1);
      }
      this.brandData = this.brandSelect.toString();
    },
    show() {
      this.popupVisible = true;
    },
    hide() {
      this.$root.Bus.$emit("closeSelection");
      this.popupVisible = false;
    },
    brandMore() {
      this.$refs.brand.show();
    },
    cateMore() {
      this.$refs.cate.show();
    },
    selcetAddress() {
      this.$refs.address.show();
    },
    popupCansel() {
      this.hide();
    },
    confirmSelect() {
      this.compareQuery();
      this.hide();
      this.$root.Bus.$emit("confirmcon");
    },
    compareQuery() {
      let max = "";
      max = Math.max(this.queryMIn, this.queryMax);
      this.queryMIn = Math.max(0, Math.min(this.queryMIn, this.queryMax));
      this.queryMax = max;
    },
    judgeBrandLength(list) {
      let newArr = [];
      if (this.brandsList.length >= 5) {
        newArr = this.brandsList.slice(0, 5);
      }
      return newArr;
    },
    judgeCateLength(list) {
      let newArr = [];
      if (this.catesList.length >= 5) {
        newArr = this.catesList.slice(0, 5);
      }
      return newArr;
    },
    clearSelect() {
      this.clearBrand();
      this.clearCate();
    },
    clearBrand() {
      this.brandsList.forEach(cell => {
        if (cell.checked) {
          this.$set(cell, "checked", false);
        }
      });
      this.brandData = "";
      this.brandSelect = [];
    },
    clearCate() {
      this.catesList.forEach(item => {
        if (item.checked) {
          this.$set(item, "checked", false);
        }
      });
      this.cateData = "";
      this.cateSelect = [];
    }
  },
  beforeDestroy() {
    this.$root.Bus.$off("clearAllBrand");
    this.$root.Bus.$off("clearAllCate");
    this.$root.Bus.$off("addressed");
    this.$root.Bus.$off("addressName");
  },
  components: {
    ClearBtn,
    TopBtn,
    CateSelection,
    BrandSelection,
    SlecAddress
  }
};
</script>

<style lang="less" scoped>
.mongoliaLayer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mintPop {
    width: 6.5rem;
    height: 100%;
    .contentList {
      width: 6.5rem;
      width: 100%;
      margin-top: 1.2rem;
      .address {
        .selAddress {
          // display: block;
          height: 0.4rem;
          margin: 0.2rem 0.2rem 0.4rem 0.2rem;
          color: #4e4e4e;
          font-size: 0.26rem;
          overflow: hidden;
          span {
            float: left;
            display: inline-block;
            line-height: 0.4rem;
            height: 0.4rem;
            padding-bottom: 0.1rem;
            margin-right: 0.2rem;
          }
          .detailAdd {
            background: url(../../assets/images/address/address.png) left
              no-repeat;
            background-size: 0.19rem 0.22rem;
            padding-left: 0.25rem;
            height: 0.4rem;
            width: 4.5rem;
            display: inline-block;
            span {
              color: #78bfff;
              line-height: 0.4rem;
              font-size: 0.24rem;
              width: 4.5rem;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              word-break: break-all;
              float: left;
            }
          }
        }
        .checkHave {
          overflow: hidden;
          margin-left: 0.2rem;
          width: 100%;
          height: 0.9rem;
          .btn {
            color: #4e4e4e;
            float: left;
            background-color: #eee;
            border-radius: 0.1rem;
            border: 1px solid #eee;
            width: 1.86rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.24rem;
            margin-right: 0.18rem;
            margin-bottom: 0.2rem;
            display: table-cell;
            vertical-align: middle;
            img {
              display: inline-block;
              width: 0.26rem;
              height: 0.26rem;
              border-radius: 100%;
              margin-right: 0.1rem;
              vertical-align: middle;
              background: url(../../assets/images/address/true.png) no-repeat;
              background-size: 0.26rem;
            }
          }
          .check {
            color: #78bfff;
            border: 1px solid #78bfff;
            background-color: #fff;
            img {
              display: inline-block;
              width: 0.26rem;
              height: 0.26rem;
              border-radius: 100%;
              margin-right: 0.1rem;
              vertical-align: middle;
              background: url(../../assets/images/address/true.png) no-repeat;
              background-size: 0.26rem;
            }
          }
        }
      }
      .price {
        width: 100%;
        overflow: hidden;
        span {
          display: block;
          margin: 0.2rem;
          color: #4e4e4e;
          line-height: 0.4rem;
          font-size: 0.28rem;
        }
        .priceInput {
          overflow: hidden;
          position: relative;
          margin: 0.2rem 0.2rem 0.4rem 0.2rem;
          span {
            position: absolute;
            top: 0.1rem;
            left: 3rem;
            width: 0.1rem;
            color: #4e4e4e;
            display: inline-block;
            padding: 0;
            margin: 0;
          }
          input {
            float: left;
            width: 2.8rem;
            border: 0;
            outline: 0;
            color: #4e4e4e;
            background-color: #eee;
            text-align: center;
            font-size: 0.24rem;
            border-radius: 0.1rem;
            padding: 0.18rem 0;
            &:last-child {
              float: right;
            }
          }
        }
      }
      .brands {
        width: 100%;
        overflow: hidden;
        p {
          height: 0.4rem;
          margin: 0.2rem;
          span {
            float: left;
            &:first-child {
              color: #4e4e4e;
              line-height: 0.4rem;
              font-size: 0.28rem;
            }
            &:last-child {
              width: 4.5rem;
              text-align: right;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              word-break: break-all;
              line-height: 0.4rem;
              float: right;
              font-size: 0.24rem;
              color: #78bfff;
            }
          }
        }
        ul {
          margin: 0.2rem;
          overflow: hidden;
          li {
            float: left;
            list-style: none;
            color: #4e4e4e;
            background-color: #eee;
            border: 1px solid #eee;
            border-radius: 0.1rem;
            width: 1.86rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.24rem;
            margin-right: 0.18rem;
            margin-bottom: 0.2rem;
            padding: 0 0.1rem;
            box-sizing: border-box;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
          .check {
            color: #78bfff;
            border: 1px solid #78bfff;
            background-color: #fff;
            img {
              display: inline-block;
              width: 0.26rem;
              height: 0.26rem;
              border-radius: 100%;
              margin-right: 0.1rem;
              vertical-align: middle;
              background: url(../../assets/images/address/true.png) no-repeat;
              background-size: 0.26rem;
            }
          }
        }
      }
      .category {
        width: 100%;
        overflow: hidden;
        p {
          height: 0.4rem;
          margin: 0.2rem;
          span {
            float: left;
            &:first-child {
              color: #4e4e4e;
              line-height: 0.4rem;
              font-size: 0.28rem;
            }
            &:last-child {
              width: 4.5rem;
              text-align: left;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              word-break: break-all;
              line-height: 0.4rem;
              float: right;
              font-size: 0.24rem;
              color: #78bfff;
            }
          }
        }
        ul {
          margin: 0.2rem;
          overflow: hidden;
          li {
            float: left;
            list-style: none;
            color: #4e4e4e;
            background-color: #eee;
            border: 1px solid #eee;
            border-radius: 0.1rem;
            width: 1.86rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.24rem;
            margin-right: 0.18rem;
            margin-bottom: 0.2rem;
            padding: 0 0.1rem;
            box-sizing: border-box;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
          .check {
            color: #78bfff;
            border: 1px solid #78bfff;
            background-color: #fff;
            img {
              display: inline-block;
              width: 0.26rem;
              height: 0.26rem;
              border-radius: 100%;
              margin-right: 0.1rem;
              vertical-align: middle;
              background: url(../../assets/images/address/true.png) no-repeat;
              background-size: 0.26rem;
            }
          }
        }
      }
    }
  }
}
</style>
